[#ftl]
[#-- 简易通用可视化页面模板，基于该项目自身的前端框架进行实现 。
        因为页面的大致布局、组件形式本身是相似的，所以直接模拟观看效果，需要更多可以自行添加。
     动态实例化方法：function initTemplateViewEdit(el){ 
           //自定义逻辑 
     }
--]

[#-- 
  tempShowId：一个随机id，避免id重复，方便命名
  previewHtmlType 布局类型，已定义了几种： 1=常规、 2=tab页签、3=滚动页签、4=表格
  
  orderEntitys：map对象，里面是排序后的对象集合（根据“排序字段”），排序方式DESC
  groupNames：map对象，里面是分组名集合（根据“分组字段”），分组值相同的划为一组
  groupEntitys：map对象，里面是分组后的对象集合（根据“分组字段”），分组值相同的划为一组
  entityKey：固定的对象名字，用法如下：
            orderEntitys[entityKey] 得到对象集合
            groupNames[entityKey]  得到组名集合
            groupEntitys[entityKey] 得到分组对象集合
--]
<div id="dlg-${tempShowId}" class="main-content">
[#if previewHtmlType == '1' && orderEntitys?? && (orderEntitys[entityKey]?size>0) ]
  <div class="row">&nbsp;</div>
  <div class="row padding-right"> 
    [@commomEle1 parent="" vlist=orderEntitys[entityKey] previewHtmlType=previewHtmlType/]
  </div> 
  <div class="row">&nbsp;</div>
[#elseif previewHtmlType == '3' && orderEntitys?? && (orderEntitys[entityKey]?size>0) ]
  [#assign entityVO = groupNames[entityKey] entityVO2 = groupEntitys[entityKey] /]
  <div class="overflow-n" style="display: flex;display: -webkit-flex;flex-direction: column;">
    <nav id="scroll-${tempShowId}" class="navbar navbar-default" style="margin: unset;">
      <div class="container-fluid">
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            [#if entityVO?exists]
            [#list entityVO?keys as key]
            <li [#if key_index ==0]class="active"[/#if]><a href="#${tempShowId+'-'+key}">${entityVO[key]!'默认'}</a></li>
            [/#list]
            [/#if]
          </ul>
        </div>
      </div>
    </nav>
    <div id="scroll-content-${tempShowId}" class="overflow-y">
      [#if entityVO?exists]
      [#list entityVO?keys as key]
      <div id="${tempShowId + '-'+key}"  style="min-height:600px;">
        <div class="row">&nbsp;</div>
        <div class="row"> 
        <div class="col-sm-12">
          <fieldset> 
            <legend class="text-info">${entityVO[key]}</legend>
          </fieldset>
        </div>
        </div>
        <div class="row">&nbsp;</div>
        <div class="row padding-right">
          [@commomEle1 parent="" vlist=entityVO2[key] previewHtmlType=previewHtmlType/]
        </div> 
        <div class="row">&nbsp;</div>
      </div>
      [/#list]
      [/#if]
    </div>
  </div>
[#elseif previewHtmlType == '2' && orderEntitys?? && (orderEntitys[entityKey]?size>0) ]
  [#assign entityVO = groupNames[entityKey] entityVO2 = groupEntitys[entityKey] /]
  <ul id="tab-${tempShowId}" class="nav nav-tabs">
    [#if entityVO?exists]
    [#list entityVO?keys as key]
    <li [#if key_index ==0]class="active"[/#if] ><a href="#${tempShowId + '-'+key}" data-toggle="tab">${entityVO[key]!'默认'}</a></li>
    [/#list]
    [/#if]
  </ul>
  <div id="tabContent-${tempShowId}" class="tab-content">
    [#if entityVO?exists]
    [#list entityVO?keys as key]
    <div id="${tempShowId + '-'+key}" class="tab-pane fade[#if key_index ==0] in active[/#if]">
      <div class="row">&nbsp;</div>
      <div class="row padding-right">
      [@commomEle1 parent="" vlist=entityVO2[key] previewHtmlType=previewHtmlType/]
      </div> 
      <div class="row">&nbsp;</div>
    </div>
    [/#list]
    [/#if]
  </div>
  
[#elseif previewHtmlType == '4' && orderEntitys?? && (orderEntitys[entityKey]?size>0) ]
   [@commomEle1 parent="" vlist=orderEntitys[entityKey] previewHtmlType=previewHtmlType/]
[/#if]
</div>

<script>

[#--  组件初始化的方法 --]
function initTemplateViewEdit(el){

    [@commomInit1 vlist=orderEntitys[entityKey]  previewHtmlType=previewHtmlType/]

    $('#scroll-content-${tempShowId}').scrollspy({ target: '#scroll-${tempShowId}' });
}

</script>
<style>
[#if previewHtmlType == '1']
  #dlg-${tempShowId} {
    border: 1px solid #ececec;
  }
[#elseif previewHtmlType == '2']
  #tabContent-${tempShowId} {
   border: 1px solid #ececec;
  }
[#elseif previewHtmlType == '3']
  #scroll-content-${tempShowId} {
    border: 1px solid #ececec;
  }
[#elseif previewHtmlType == '4']
  
[/#if]
</style>


[#--  初始化元素 --]
[#macro commomEle1 parent vlist previewHtmlType]
[#if vlist?? && (vlist?size>0)]
    [#if previewHtmlType=="4"]
    <table id="tbl-query-${tempShowId}"><table>
    [#else]
    [#list vlist as b]
    [#if b.fieldType=="2"]
    [#if b.children?? && b.children?size>0]
    [@commomEle1 parent=b.fieldJavaCode vlist=b.children previewHtmlType=previewHtmlType/]
    [/#if]
    [#else]
    <div [#if parent!=""]datalevel="${parent}"[/#if] class="col-xs-12 col-sm-[#if b.gridClonums??]${b.gridClonums}[#else]6[/#if][#if b.pageShowFlag=='0'] hidden[/#if]">
      [#if previewHtmlType=="1" || b.componentType!="table"]
      <label class="form-lable" cpt-id="${b._uniqueId}">${b.fieldTitle}</label>
      <div class="input-block">
        [#if b.componentType=="input"]
        <input id="${b.fieldJavaCode}" name="${b.fieldJavaCode}" data-options="{[#if (b.mustFlag!"0")=="1"]required:true[/#if]}" style="width:100%;" />
        [#elseif b.componentType=="text"]
        <input id="${b.fieldJavaCode}" name="${b.fieldJavaCode}" data-options="{[#if (b.mustFlag!"0")=="1"]required:true[/#if]}" style="width:100%;" />
        [#elseif b.componentType=="select"]
        <select id="${b.fieldJavaCode}" name="${b.fieldJavaCode}" data-options="{[#if (b.mustFlag!"0")=="1"]required:true[/#if]}" style="width:100%;" ></select>
        [#elseif b.componentType=="grid"]
        <input id="${b.fieldJavaCode}" name="${b.fieldJavaCode}" data-options="{[#if (b.mustFlag!"0")=="1"]required:true[/#if]}" style="width:100%;" />
        [#elseif b.componentType=="label"]
        <label id="${b.fieldJavaCode}" name="${b.fieldJavaCode}" data-options="{[#if (b.mustFlag!"0")=="1"]required:true[/#if]}" style="width:100%;" ></label>
        [#elseif b.componentType=="checkbox"]
        <span class="textbox textbox2 easyui-fluid"><div class="input-g"><input id="${b.fieldJavaCode}" name="${b.fieldJavaCode}" data-options="{[#if (b.mustFlag!"0")=="1"]required:true[/#if]}" style="" /></div></span>
        [#elseif b.componentType=="radiobox"]
        <span class="textbox textbox2 easyui-fluid"><div class="input-g"><input id="${b.fieldJavaCode}" name="${b.fieldJavaCode}" data-options="{[#if (b.mustFlag!"0")=="1"]required:true[/#if]}" style="" /></div></span>
        [#elseif b.componentType=="selecttree"]
        <input id="${b.fieldJavaCode}" name="${b.fieldJavaCode}" data-options="{[#if (b.mustFlag!"0")=="1"]required:true[/#if]}" style="" />
        [#elseif b.componentType=="table"]
        <div style="border: 1px solid #EEE;"><table id="${b.fieldJavaCode}" name="${b.fieldJavaCode}" listlevel="${b.fieldJavaCode}" style="min-height:300px;"></table></div>
        [#else]

        [/#if]
      </div>
      [#else]
        <div style="border: 1px solid #EEE;"><table id="${b.fieldJavaCode}" name="${b.fieldJavaCode}" listlevel="${b.fieldJavaCode}" style="min-height:300px;"></table></div>
      [/#if]
    </div>
    [/#if]
    [/#list]
    [/#if]
[/#if]
    
[/#macro]


[#--  初始化组件 --]
[#macro commomInit1 vlist previewHtmlType]
[#if vlist?? && (vlist?size>0)]
[#if previewHtmlType=="4"]
    var buttonsIdx = [4];
    var buttonsFunc = [];
    var options = {
                data : [],
                columns:[[
                [#list vlist as b]
                [#if (b.fieldUseType=="1" || b.fieldUseType=="2") && b.fieldType="1" ]
                {field: '${b.fieldJavaCode}', ${handleTableColumnFunc(b)} },
                [/#if]
                [/#list]
                ]],
                border: true,
    };
    zUtil.tableInit('${'#tbl-query-'+tempShowId}',options,buttonsIdx,buttonsFunc);
[#else]
    [#list vlist as b]
    [#if b.fieldUseType=="1" || b.fieldUseType=="2" ]
    [#if b.fieldType=="2"]
    [#if b.children?? && b.children?size>0]
    [@commomInit1 vlist=b.children previewHtmlType=previewHtmlType/]
    [/#if]
    [#elseif b.componentType=="input"]
    zUtil.inputInit('#dlg-${tempShowId} #${b.fieldJavaCode}','input',
        ${b.inputOptions2!'{}'}
    );
    [#if (b.readonlyFlag!'0')=="1"]zUtil.readonly('#dlg-${tempShowId} #${b.fieldJavaCode}');[/#if]
    [#elseif b.componentType=="text"]
    zUtil.inputInit('#dlg-${tempShowId} #${b.fieldJavaCode}','input',
        ${b.inputOptions2!'{multiline:true}'}
    );
    [#if (b.readonlyFlag!'0')=="1"]zUtil.readonly('#dlg-${tempShowId} #${b.fieldJavaCode}');[/#if]
    [#elseif b.componentType=="select"]
    zUtil.inputInit('#dlg-${tempShowId} #${b.fieldJavaCode}','select',
        ${b.inputOptions2!'{}'}
    );
    [#if (b.readonlyFlag!'0')=="1"]zUtil.readonly('#dlg-${tempShowId} #${b.fieldJavaCode}');[/#if]
    [#elseif b.componentType=="grid"]
    zUtil.inputInit('#dlg-${tempShowId} #${b.fieldJavaCode}','cgrid',
        ${b.inputOptions2!'{}'}
    );
    [#if (b.readonlyFlag!'0')=="1"]zUtil.readonly('#dlg-${tempShowId} #${b.fieldJavaCode}');[/#if]
    [#elseif b.componentType=="table"]
    zUtil.tableInit('#dlg-${tempShowId} #${b.fieldJavaCode}',
    {
        [#if b.children?? && b.children?size>0]
        [#assign entityChildDTO = b['children'] /]
        columns:[[
                [#list entityChildDTO as b]
                [#if (b.fieldUseType=="1" || b.fieldUseType=="2") && b.fieldType="1" ]
                {field: '${b.fieldJavaCode}', ${handleTableColumnFunc(b)} },
                [/#if]
                [/#list]
        ]],
        border: true,
        [/#if]
    },[0]);
    [#if (b.readonlyFlag!'0')=="1"]zUtil.readonly('#dlg-${tempShowId} #${b.fieldJavaCode}');[/#if]
    [#elseif b.componentType=="selecttree"]
    zUtil.inputInit('#dlg-${tempShowId} #${b.fieldJavaCode}','input',
        ${b.inputOptions2!'{}'}
    );
    [#if (b.readonlyFlag!'0')=="1"]zUtil.readonly('#dlg-${tempShowId} #${b.fieldJavaCode}');[/#if]
    [#elseif b.componentType=="checkbox"]
    zUtil.inputInit('#dlg-${tempShowId} #${b.fieldJavaCode}','check',
        ${b.inputOptions2!'{}'}
    );
    [#if (b.readonlyFlag!'0')=="1"]zUtil.readonly('#dlg-${tempShowId} #${b.fieldJavaCode}');[/#if]
    [#elseif b.componentType=="radiobox"]
    zUtil.inputInit('#dlg-${tempShowId} #${b.fieldJavaCode}','radio',
        ${b.inputOptions2!'{}'}
    );
    [#if (b.readonlyFlag!'0')=="1"]zUtil.readonly('#dlg-${tempShowId} #${b.fieldJavaCode}');[/#if]
    [#elseif b.componentType=="label"]
    [/#if]
    [/#if]
    [/#list]
[/#if]
[/#if]
[/#macro]


[#function handleTableColumnFunc b]
[#assign str = "title: '<label cpt-id=\"" + b._uniqueId +"\" style=\"padding: 5px;\">"+b.fieldTitle+"</label>', align: 'center', "   ]
   [#if (b.pageShowFlag!"") == "0"]
   [#assign str = str + "hidden: true, " ]
   [/#if]
   [#if (b.inputClass!"")?length>0]
   [#assign str = str + "width: 'b.inputClass', " ]
   [/#if]
   [#if b.inputType=="easy-select"|| b.inputType=="easy-selectx" || b.inputType=="easy-grid"]
   [#assign str = str + "formatter: function(value,rowData,rowIndex){return value;}" ]
   [/#if]
   
[#return str]
[/#function]